<template lang="">
  <el-button @click="addClick()">添加管理员</el-button>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="adminname" label="管理员名字" width="180" />
      <el-table-column prop="adminid" label="管理员id" width="180" />
      <el-table-column prop="role" label="管理员角色" width="180" />
      <el-table-column prop="checkedKeys" label="管理员权限" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      v-model:current-page="pagenum"
      @current-change="pageNumChange"
    />
  </div>

  <el-dialog v-model="dialogVisible" title="编辑" width="500">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="管理账号名">
        <el-input v-model="form.adminname" />
      </el-form-item>
      <el-form-item label="管理账密码">
        <el-input :v-model.string="form.password" />
      </el-form-item>
      <el-form-item label="管理角色">
        <el-select v-model="form.role" placeholder="请选择角色">
          <el-option label="超级管理" :value="2" />
          <el-option label="普通管理" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-form-item label="权限" :label-width="100">
      <!-- node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	string -->
      <el-tree
        ref="treeRef"
        :data="menuArr"
        node-key="name"
        show-checkbox
        :props="{ label: 'name', children: 'children' }"
        @check="treeChange"
      />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onSubmit">确定</el-button>
        <el-button type="primary" @click="dialogVisible = false"> 取消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { userListRequest, userDeleteRequest, userUpdateRequest } from '@/api/user'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
// import menuArr from "@/router/menu.js"

export default {
  data() {
    return {
      // menuArr: menuArr,

      tableData: [], //表格的数据，
      allData: [], //服务器一开始返回所有数据
      // 前端分页
      pagesize: 5,
      pagenum: 1,
      total: 0,
      dialogVisible: false,
      form: {
        adminname: '',
        password: '',
        role: 1,
        checkedKeys: []
      }
    }
  },
  mounted() {
    this.loadList()
  },
  //注入 父级提供的函数
  // inject: ["changeMenuActive"],
  methods: {
    addClick() {
      this.$router.push('/usermanager/useradd')
      // eventBus.emit("changeActive")
    },
    async onSubmit() {
      console.log(this.form)
      let r = await userUpdateRequest(this.form)
      this.dialogVisible = false
      this.loadList()
      ElMessage(r.data.message)
    },
    pageNumChange() {
      this.tableData = this.allData.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagesize * this.pagenum
      )
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.form = _.cloneDeep(row)
      console.log(this.form)
      this.form.password = ""
    },
    async handleDelete(row) {
      console.log(row.adminid)
      let r = await userDeleteRequest(row.adminid)
      console.log(r.data)
      if (r.data.code == 200) {
        this.loadList()
        ElMessage({
          type: 'success',
          message: r.data.message
        })
      }
    },
    async loadList() {
      let r = await userListRequest()
      this.allData = r.data.data.reverse()
      // 服务器返回的 全部列表信息
      // 后端接口没有提供分页功能
      // 前端得做分页逻辑
      this.total = this.allData.length
      this.pageNumChange()
    }
  }
}
</script>
<style lang=""></style>
